<template>
	<van-field
		class="common-component-select_field-wrap custom-form-field custom-field-right-slot select-field"
		v-bind="$attrs"
		v-on="$listeners"
		:value="selectedLabel"
		right-icon="arrow-down"
		@click-input="handleShowActionSheet"
	/>
</template>

<script>
/**
 * <select-field
        v-model="formData.sex"
        :label-width="0"
        placeholder="性别"
        readonly
        :disabled="readonly"
        :actions="sexActions"
        :rules="[{ required: true }]"
    />

    const sexActions = Object.freeze([
        {name: '男', value: 0},
        {name: '女', value: 1},
        {name: '未知', value: 2}
    ]);
 */
import {Field} from 'vant';
import {Utils} from "jboot-env";

export default {
	name: 'SelectField',

	components: {
		[Field.name]: Field
	},

	props: {
		value: [Object, Number, String],

		actions: {
			required: true,
			type: Array
		}
	},

	computed: {
		selectedLabel ({value}){
		    const label = Utils.blank2Default(this.actions, []).find(item => item.value === value)?.name;

            this.$emit('change-label', label);

			return label;
		}
	},

	methods: {
		handleShowActionSheet (){
			this.actionSheet(this.actions, item => {
			    this.$emit('input', item.value);

			    this.$emit('change-label', item.name);
            });
		}
	}
}
</script>

<style lang="scss">
.common-component-select_field-wrap {
}
</style>
